<template>
	<cu-custom bgColor="" :isBack="true">
		<template #title>任务详情</template>
	</cu-custom>
	
	<!-- #ifdef MP-ALIPAY -->
	<view class="voice-icon-box theme-shadow">
		<text class="cuIcon-notificationfill voice-icon" @click="navToPlay"></text>
	</view>
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<TextPlay :title="missionInfo.title" :content="missionInfo.content" />
	<!-- #endif -->
	<view class="page-content">
		
		<view class="mb-3">
			<view class="default-box mission-box">
				<view class="large-text text-bold text-ellipsis-3 mb-2 text-blue">
					{{ missionInfo.title }}
					
				</view>
				<view ref="content"
					class="middle-text text-gray "
					:class="{
						'text-ellipsis': ellipsis && foldable
					}"
				>
					{{ missionInfo.content }}
				</view>
				<view @click="checkMore(false)" class="check-more middle-text" v-if="foldable && ellipsis">
					查看全部<text class="cuIcon-unfold"></text>
				</view>
				<view @click="checkMore(true)" class="check-less middle-text" v-if="foldable && !ellipsis">
					收起<text class="cuIcon-fold"></text>
				</view>
				
			</view>
			<SchoolLabel
				:school-info="schoolInfo"
				:contact-show="false"
				titleColor="#000" />
		</view>
		
		
		<view>
			<view class="cu-list grid col-4 no-border" v-if="missionInfo.status === '4' || missionInfo.status === '5'">
				<view
					class="cu-item grid-menu"
					v-for="(item, index) in cuIconList"
					:key="index"
					@click="menuClick(item)"
				>
					<view
						:class="'cuIcon-' + item.cuIcon"
						:style="{color: item.color}">
						<view class="cu-tag badge" v-if="item.badge!=0">
							<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
						</view>
					</view>
					<text>{{ item.name }}</text>
				</view>
			</view>
					
			<view style="height: 100rpx"></view>
				
			
		</view>
		<!-- <view v-else style="margin-top: 100rpx;">
			<CuButton @click="navUpload">上传材料</CuButton>
		</view> -->
		<view v-if="missionInfo.status === '8'">
			<view class="info mb-1" style="text-align: center;">
				<text class="cuIcon-info text-gray"></text>
				<text class="small-text text-gray">该任务已被取消</text>
			</view>
		</view>
		<view v-if="userInfo.role === 1">
			<view class="flex justify-between" v-if="missionInfo.status === '2'">
				<view style="width: 48%;"><CuButton plain @click="handleIgnore">忽略</CuButton></view>
				<view style="width: 48%;"><CuButton @click="handleAccept">确认</CuButton></view>
			</view>
			<view class="btn-row" v-if="missionInfo.status === '4' || missionInfo.status === '5'">
				<view class="info mb-1" v-if="missionInfo.status === '5'">
					<text class="cuIcon-info text-gray"></text>
					<text class="small-text text-gray">任务已完成</text>
				</view>
				<CuButton :disabled="missionInfo.status === '5'" @click="handleFinish">任务完成</CuButton>
			</view>
			<view class="btn-row" v-if="missionInfo.status === '7'">
				<view class="info mb-1">
					<text class="cuIcon-info text-gray"></text>
					<text class="small-text text-gray">该任务已被忽略</text>
				</view>
				<CuButton @click="handleReaccept">重新接受</CuButton>
			</view>
		</view>
	</view>
	
	
	
	<Dialog
		:message="dialogMessage"
		:type="dialogType"
		:cancelable="dialogCancelable"
		v-model:show="dialogShow"
		@confirm="handleConfirm"
	/>
	
	<Dialog
		:message="dialogMessage"
		:type="dialogType"
		:cancelable="dialogCancelable"
		v-model:show="dialogShow"
		@confirm="handleConfirm"
	/>
	
	<Modal ref="modal">
		<view
			class="padding-xl flex justify-between align-center click-active-white"
			v-for="(item, index) in schoolInfo.superintendents"
			:key="index"
			@click="phoneCall(item)"
		>
			<view class="flex align-center">
				<text class="cuIcon-phone" style="font-size: 44rpx;"></text>
				<view class="name middle-text">{{ item.superintendentName }}</view>
			</view>
			<view class="middle-text text-blue">
				<view class="phone">{{ item.superintendentPhonenumber || "暂无联系方式" }}</view>
			</view>
		</view>
	</Modal>
	
</template>

<script lang="ts" setup>
import { getMissionDetail, setMissionStatus } from "@/api/mission.js"
import { getSchoolDetail } from "@/api/school.js"
import { onLoad } from "@dcloudio/uni-app"
import { nextTick, onMounted, reactive, ref, type Ref } from 'vue';
import SchoolLabel from "../school/components/SchoolLabel.vue"
import CuButton from "@/components/CuButton.vue"
import { router } from "@/router"
import Dialog from "@/components/Dialog.vue"
import { getField } from "@/utils/base"
import store from "@/store/index.js"
import { obj2str } from "@/utils/base"
import env from "@/env"
import TextPlay from "@/components/TextPlay.vue"
import Modal from "@/components/Modal.vue"
import { ISchool } from "@/interface/ISchool"
import { IMission } from "@/interface/IMission"
import { ISupervisor } from "@/interface/ISupervisor"

// #ifdef H5
import dd from "gdt-jsapi"
// #endif

const props = defineProps({
	mission_id: {
		type: String,
		default: 0
	}
})


// const dialog = ref(null)
let mission_id = 0
let form_id = 0
let confirmType = "none"
const userInfo = reactive(store.getters.userInfo)
const modal = ref()
const foldable:Ref<boolean> = ref(false)
const ellipsis:Ref<boolean> = ref(true)
const dialogShow:Ref<boolean> = ref(false)
const dialogMessage:Ref<string> = ref("")
const dialogType:Ref<string> = ref("success")
const dialogCancelable:Ref<boolean> = ref(false)
const missionInfo:IMission = reactive({
	title: "",
	content: "",
	status: "",
	schoolId: 0,
	todaySignIn: "0"
})
const schoolInfo: ISchool = reactive({
	id: null,
	name: "",
	// tags: ["省示范中学", "文明学校", "最美中学"],
	principal: "",
	principal_phone: "",
	teacherCount: null,
	studentCount: null,
	contact_phone: null,
	contact_name: "",
	superintendents: []
})

const cuIconList = ref([
	{
		cuIcon: "dianhua",
		color: "#3974df",
		badge: 0,
		name: "学校联络人",
	},
	{
		cuIcon: "locationfill",
		color: "#3974df",
		badge: 0,
		name: "打卡",
	},
	// {
	// 	cuIcon: "cardboardfill",
	// 	color: "#3974df",
	// 	badge: 0,
	// 	name: "快捷预约"
	// },
	{
		cuIcon: "picfill",
		color: "#3974df",
		badge: 0,
		name: "上传材料",
	}, {
		cuIcon: "favorfill",
		color: "#3974df",
		badge: 0,
		name: "生成报告",
	},
	{
		cuIcon: "formfill",
		color: "#3974df",
		badge: 0,
		name: "提交报告",
	},
	{
		cuIcon: "samefill",
		color: "#3974df",
		badge: 0,
		name: "查看报告",
	}, {
		cuIcon: "newshotfill",
		color: "#3974df",
		badge: 0,
		name: "专项督导表单",
	}, 
	{
		cuIcon: "radioboxfill",
		color: "#3974df",
		badge: 0,
		name: "查看日志",
	}
])
const checkMore = (e:boolean) => {
	ellipsis.value = e
}
const navUpload = () => {
	router.push("/pages/mission/upload?mission_id=" + mission_id)
}
const handleReaccept = () => {
	confirmType = "accept"
	dialogMessage.value = "已重新接受该任务"
	dialogType.value = "success"
	dialogCancelable.value = false
	dialogShow.value = true
}
const handleAccept = () => {
	confirmType = "accept"
	dialogMessage.value = "已确认接受该任务"
	dialogType.value = "success"
	dialogCancelable.value = false
	dialogShow.value = true
}
const handleIgnore = () => {
	confirmType = "ignore"
	dialogMessage.value = "确认忽略此任务吗"
	dialogType.value = "info"
	dialogCancelable.value = true
	dialogShow.value = true
}
const handleFinish = () => {
	confirmType = "finish"
	dialogMessage.value = "确认完成该任务吗"
	dialogType.value = "success"
	dialogCancelable.value = true
	dialogShow.value = true
}

const handleConfirm = () => {
	if (confirmType === "accept") {
		setMissionStatus({
			id: mission_id,
			status: 4
		})
			.then((res:any):void => {
				loadDetail()
				dialogShow.value = false
			})
			.catch((err:any):void => {
				// uni.showToast({
				// 	title: "请求失败"
				// })
				dialogShow.value = false
			})
	} else if (confirmType === "ignore") {
		setMissionStatus({
			id: mission_id,
			status: 7
		})
			.then((res:any):void => {
				loadDetail()
				dialogShow.value = false
			})
			.catch((err:any):void => {
				// uni.showToast({
				// 	title: "请求失败"
				// })
				dialogShow.value = false
			})
	} else if (confirmType === "finish") {
		setMissionStatus({
			id: mission_id,
			status: 5
		})
			.then((res:any):void => {
				loadDetail()
				dialogShow.value = false
			})
			.catch((err:any):void => {
				// uni.showToast({
				// 	title: "请求失败"
				// })
				dialogShow.value = false
			})
	}
}
const navToPlay = () => {
	const query = obj2str({
		title: missionInfo.title,
		content: missionInfo.content,
	})
	dd.openLink({
		url: `${env.DD_SCHEME}${env.DD_HOST}/action/open_app?type=1&offline=false&url=${encodeURIComponent(env.MINI_APP_URL + "pages/index/textplay?" + query)}`
	}).then((res:any) => {
		console.log("success")
		console.log(res)
	}).catch((err:any) => {
		console.log("error")
		console.log(err)
	})
}

const phoneCall = (item: ISupervisor) => {
	if (!item.superintendentPhonenumber) return uni.showToast({
		icon: "none",
		title: "该用户手机号不存在"
	})
	uni.makePhoneCall({
		phoneNumber: String(item.superintendentPhonenumber), //仅为示例
	})
}

const menuClick = (item:any) => {
	if (item.name === '学校联络人') {
		uni.makePhoneCall({
			phoneNumber: String(schoolInfo.contact_phone), //仅为示例
		})
	} else if (item.name === '责任督学') {
		
		modal.value.show()
	} else if (item.name === '查看报告') {
		router.push("/pages/mission/report?mission_id=" + mission_id)
	} else if (item.name === '上传材料') {
		router.push("/pages/mission/upload?mission_id=" + mission_id)
	} else if (item.name === '生成报告') {
		router.push("/pages/mission/createreport?mission_id=" + mission_id)
	} else if (item.name === '提交报告') {
		router.push("/pages/mission/submitreport?mission_id=" + mission_id)
	} else if (item.name === '打卡') {
		router.push("/pages/mission/clockin?mission_id=" + mission_id + "&todaySignIn=" + missionInfo.todaySignIn)
	} else if (item.name === '查看日志') {
		router.push("/pages/mission/record?mission_id=" + mission_id)
	} else if (item.name === "专项督导表单") {
		if (!form_id) {
			uni.showToast({
				icon: "none",
				title: "当前任务不存在专项督导表单"
			})
			return
		}
		router.push({
			path: "/pages/mission/form",
			params: {
				mission_id, form_id
			}
		})
	}
}


const loadDetail = ():void => {
	getMissionDetail(mission_id)
		.then((res:any):void => {
			if (res.status == 1) res.status = '2'
			missionInfo.title = res.title
			missionInfo.content = res.describe
			missionInfo.status = res.status
			missionInfo.todaySignIn = res.todaySignIn
			form_id = res.formId
			if (missionInfo.content.length >= 200) {
				foldable.value = true
			}
			console.log("missionInfo", missionInfo)
			
			getSchoolDetail(res.schoolId)
				.then((school_res:any):void => {
					schoolInfo.id = school_res.id
					schoolInfo.name = school_res.name
					schoolInfo.principal = school_res.principal
					schoolInfo.teacherCount = school_res.staffTotal
					schoolInfo.contact_phone = school_res.schoolContactPhoneNumber
					schoolInfo.principal_phone = school_res.contact
					schoolInfo.studentCount = getField(school_res.details, "在校生数(人)")
					// schoolInfo.contact_phone
					schoolInfo.contact_name = school_res.schoolContactName
					schoolInfo.superintendents = school_res.superintendents
					console.log(schoolInfo)
				})
		})
		.catch((err:any):void => {
			console.log(err)
		})
}
onMounted(() => {
	if (userInfo.role === 2) {
		cuIconList.value = [
			{
				cuIcon: "dianhua",
				color: "#3974df",
				badge: 0,
				name: "责任督学",
			},
			{
				cuIcon: "picfill",
				color: "#3974df",
				badge: 0,
				name: "上传材料",
			},
			{
				cuIcon: "newshotfill",
				color: "#3974df",
				badge: 0,
				name: "专项督导表单",
			}, 
			{
				cuIcon: "radioboxfill",
				color: "#3974df",
				badge: 0,
				name: "查看日志",
			}
		]
	}
	
})

onLoad((options) => {
	if (options.mission_id) {
		mission_id = options.mission_id
		loadDetail()
	} else {
		router.replace("/pages/index/error")
	}
})
</script>

<style lang="stylus" scoped>
.mission-box
	border-bottom: 1px dashed #eee
.cu-list
	border-radius: 12rpx
.cu-item
	width: 33.33%
.btn-row
	// position: fixed
	bottom: 40rpx
	// width: calc(100% - 100rpx)
	width: 100%
	// margin-bottom: 100rpx
	.info
		display: flex
		align-items: center
		justify-content: center
.btn-box
	display: flex
	padding 30rpx
	flex-wrap: wrap
	text-align: center
	justify-content: space-around
	padding-bottom: 128rpx
	.kuaijie-btn
		margin: 30rpx
		// width: calc(50% - 80rpx)
		background-color: #3974df
		color: #fff
		padding: 18rpx 52rpx
		border-radius: 50rpx
.cu-dialog
	background-color #fff
	.btn-bar
		padding 40rpx
	.check-icon
		text-align: center
		margin: 50rpx 0 20rpx
		text
			color: #fff
			background-color: #3974df
			padding: 20rpx
			border-radius: 40rpx
.grid-menu
	transition: all .3s
.grid-menu:active
	background-color: #efefef
.text-ellipsis
	display: -webkit-box
	-webkit-box-orient: vertical
	overflow: hidden
	-webkit-line-clamp: 8
	height: max-content
.check-more
	color: #3974df
	position: relative
	top: -60px
	background: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0))
	height: 60px
	display: flex
	align-items: flex-end
	justify-content: center
.check-less
	color: #3974df
	position: relative
	display: flex
	align-items: flex-end
	justify-content: center
	
.voice-icon-box
	position: fixed
	top: 20vh
	right 30rpx
	z-index: 99
	background: #fff
	height: 60rpx
	width: 60rpx
	border-radius: 30rpx
	padding 0 20rpx
	display: flex
	align-items: center
	justify-content: center
	.voice-icon
		color: #dfa439
</style>
